<template>
	<view class="nav">
		<block v-for="(item, index) in titles" :key="index">
			<view class="nav-item" @click="pathClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.name}}</text>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: [
					{
						name: '个人超市',
						icon: 'iconfont icon-ziyuan',
						path: '/pages/goods/goods'
					},
					{
						name: '联系我们',
						icon: 'iconfont icon-guanyuwomen',
						path: '/pages/connect/connect'
					},
					{
						name: '社区图片',
						icon: 'iconfont icon-tupian',
						path: '/pages/pics/pics'
					},
					{
						name: '学习视频',
						icon: 'iconfont icon-shipin',
						path: '/pages/vedios/videos'
					}
				]
			}
		},
		methods: {
			pathClick(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.nav {
		display: flex;
		padding-bottom: 10rpx;
		border-bottom: 10rpx solid #FFECEC;
		justify-content: space-evenly;
		.nav-item {
			width: 18%;
			text-align: center;
			.iconfont {
				font-size: 56rpx !important;
				padding: 30rpx;
				background-color: $shop-color;
				color: white;
				border-radius: 50%;
				margin: 15rpx 0 2rpx;
			}
		}
		text {
			font-size: 26rpx;
		}
	}
</style>
